<%--
  Created by IntelliJ IDEA.
  User: 494418174
  Date: 2020/3/6 0006
  Time: 18:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">检查单号:</label>
            <div class="layui-input-inline" style="padding: 5px;width: 280px">
                <input type="text" name="checkId" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入检查单号" style="height: 30px;border-radius: 10px;width: 280px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">存在问题:</label>
            <div class="layui-input-inline" style="padding: 5px;width: 280px">
                <input type="text" name="problem" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入存在的问题" style="height: 30px;border-radius: 10px;width: 280px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">问题描述:</label>
            <div class="layui-input-inline" style="padding: 5px;width: 280px">
                <input type="text" name="checkDesc" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入问题描述" style="height: 30px;border-radius: 10px;width: 280px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">出租单号:</label>
            <div class="layui-input-inline" style="padding: 5px;width: 280px">
                <input type="text" name="rentId" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入出租单号" style="height: 30px;border-radius: 10px;width: 280px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间:</label>
            <div class="layui-input-inline" style="padding: 5px;width: 280px">
                <input type="text" name="startDate" id="startTime" readonly="readonly"
                       class="layui-input layui-input-inline"
                       placeholder="请输入开始检查时间" style="height: 30px;border-radius: 10px;width: 280px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间:</label>
            <div class="layui-input-inline" style="padding: 5px;width: 280px">
                <input type="text" name="endDate" id="endTime" readonly="readonly"
                       class="layui-input layui-input-inline"
                       placeholder="请输入结束检查时间" style="height: 30px;border-radius: 10px;width: 280px">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-black" >
            <button type="button"
                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                    lay-submit  lay-filter="doSearch" style="margin-top: 4px">查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                    style="margin-top: 4px">重置
            </button>
        </div>
    </div>

</form>



<script id="checkBar" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>
<%--显示数据表格--%>
<table id="checkTable" lay-filter="checkTable"></table>
<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">检查单号:</label>
            <div class="layui-input-block">
                <input type="text" name="checkId" lay-verify="required" readonly="readonly" placeholder="请输入检查单号"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出租单号:</label>
            <div class="layui-input-block">
                <input type="text" name="rentId" lay-verify="required" readonly="readonly" placeholder="请输入出租单号"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">检查时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="checkDate" id="checkDate" lay-verify="required" placeholder="请输入起租时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">存在问题:</label>
                <div class="layui-input-inline">
                    <input type="text" name="problem" lay-verify="required" id="problem" placeholder="请输入存在的问题" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">问题描述:</label>
                <div class="layui-input-inline">
                    <input type="text" name="checkDesc" lay-verify="required" placeholder="请输入问题描述"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">赔付金额:</label>
                <div class="layui-input-inline">
                    <input type="text" name="payMoney" lay-verify="required"  placeholder="请输入车牌号" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">操作员:</label>
                <div class="layui-input-inline">
                    <input type="text" name="openName" id="openName" lay-verify="required" placeholder="请输入操作员" readonly="readonly" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                <button type="button"
                        class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                        lay-filter="doSubmit" lay-submit="">提交
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">重置
                </button>
            </div>
        </div>
    </form>
</div>

<script src="/layui/layui.js"></script>
<script>
    var checkTable;
    layui.use(['table','form','layer','jquery','upload','laydate'], function(){
        var table = layui.table
        var form = layui.form
        var layer = layui.layer
        var $ = layui.jquery
        var upload = layui.upload
        var laydate = layui.laydate;
        //查询条件的
        laydate.render({
            elem: '#startTime',
            type: 'datetime'
        });
        laydate.render({
            elem: '#endTime',
            type: 'datetime'
        });

        // 初始table
        checkTable = table.render({
            elem:"#checkTable"
            ,url:"/check/findCheckBy"
            ,page: {limit:5 ,limits:[5,10,15]} //开启分页
            ,cellMinWidth:100
            ,cols: [[ //表头
                , {field: 'checkId', title: '检查单号', align: 'center'}
                , {field: 'rentId', title: '出租单号', align: 'center'}
                , {field: 'problem', title: '存在问题', align: 'center'}
                , {field: 'checkDesc', title: '问题描述', align: 'center'}
                , {field: 'payMoney', title: '赔付金额', align: 'center'}
                , {field: 'openName', title: '操作员', align: 'center'}
                , {field: 'checkDate', title: '检查时间', align: 'center',}
                , {field: 'createTime', title: '录入时间', align: 'center',}
                ,{fixed: 'right', title:'操作', toolbar: '#checkBar',width:'150'}
            ]]
        })

        // form表单提交
        form.on("submit(doSearch)",function(data) {
            checkTable.reload({
                url:"/check/findCheckBy?"+$("#searchFrm").serialize()
                ,page:{
                    curr:1
                }
            })
            return false;
        })



        //监听行工具事件
        table.on('tool(checkTable)', function(obj){
            var data = obj.data
            if(obj.event == "edit"){ // 编辑
                checkUpdate(data)
            }else  if(obj.event == "del"){ // 删除
                del(data)
            }
        })

        function del(data){
            layer.confirm('确认删除' + data.checkId + '这个数据么？',function(ind){
                $.post("/check/delCheck", {"checkId":data.checkId} ,function(d) {
                    layer.msg(d.msg)
                    // 刷新table数据
                    checkTable.reload()
                })
                layer.close(ind)
            })
        }

        var index;

        function checkUpdate(data) {
            index =  layer.open({
                type:1 // 1（页面层）
                , title:"修改检查单"
                , content:$("#saveOrUpdateDiv")
                , area : ['700px', '480px']
                , success:function() {
                    // 把当前行的数据data显示到form表单中去,form表单中是有id隐藏字段
                    form.val("dataFrm", data);

                    //编辑修改弹出层的
                    laydate.render({
                        elem:'#checkDate',
                        type:'datetime',
                        value:data.checkDate
                    });
                }
            })
        }
        // form表达提交 -- 新增/修改
        form.on("submit(doSubmit)",function() {
            layer.confirm("您确定要提交该数据么",function(ind){
                $.post("/check/updateCheck",$("#dataFrm").serialize(),function(data) {
                    layer.msg(data.msg)
                    layer.close(index)
                    // 刷新table数据
                    checkTable.reload()
                })
                layer.close(ind)
            })
            return false;
        })


    })
</script>
</body>
</html>
